Candlestick Chart

Used in financial markets to visualize price movements over time, showing open, high, low, and close prices. This provides a rich visual representation of price action, allowing traders and investors to identify trends, patterns, and potential trading opportunities. It helps to understand the volatility and momentum of price movements, and to make informed trading decisions.

Chart:

Code:

  const { muze, getDataFromSearchQuery } = viz;
  
  const data = getDataFromSearchQuery();

  const DateField = "Day(date)";
  const OpenField = "Average open";
  const HighField = "Average high";
  const LowField = "Average low";
  const CloseField = "Average close";
  const ColorField = "trend_status";

  muze
    .canvas()
    .columns([DateField])
    .rows([
      muze.Operators.share(
        OpenField,
        HighField,
        LowField,
        CloseField
      ),
    ])
    .layers([
      {
        mark: "tick",
        encoding: {
          x: DateField,
          y: HighField,
          y0: LowField,
          size: {
            value: () => 0.001,
          },
          color: {
            value: () => "#000",
          },
          opacity: {
            value: () => 0.3,
          },
        },
        transition: {
          disabled: true,
        },
      },
      {
        mark: "bar",
        encoding: {
          x: DateField,
          y: OpenField,
          y0: CloseField,
          color: ColorField,
        },
        transition: {
          disabled: true,
        },
      },
    ])
    .config({
      axes: {
        y: {
          showAxisName: false,
        },
      },
      legend: {
        color: {
          show: false,
          fields: {
            [ColorField]: {
              domainRangeMap: {
                bullish: "#B3DE69",
                bearish: "#FB8072",
              },
            },
          },
        },
      },
    })
    .data(data)
    .mount("#chart"); // mount your chart